<template>
    <DraggablePopup2 v-if="props.isShow" :minWidthHeight="[510, 100]"
        :title="`${(scenetree && scenetree.name) ? scenetree.name : ''}-编辑器`" :width="1100" :height="'600px'"
        :left="300" :top="100" @close="cancel" :showButton="true" @ok="confirm">
        <div class="style">
            <div class="left">
                <div class="left-header">
                    <button @click="switchConfig('规则配置UI')"
                        :class="{ activeButton: configMode == '规则配置UI' }">规则配置UI</button>
                    <button @click="switchConfig('规则配置JSON')"
                        :class="{ activeButton: configMode == '规则配置JSON' }">规则配置JSON</button>
                </div>
                <div class="left-content">
                    <div v-if="configMode == '规则配置UI'">
                        <div class="rule-fun">
                            <button>添加规则</button>
                        </div>
                        <div class="rule-header">
                            <p>序号</p>
                            <p>规则</p>
                            <p>颜色</p>
                            <p>显隐</p>
                        </div>
                        <div class="rule-content">
                            <div v-for="(item, index) in ruleRef" :key="index">
                                <p>{{ index }}</p>
                                <div class="rule-content-item">
                                    <EnumProp :isStyleEdit="true" :withUndefined="false" :defaultValue="undefined"
                                        :enumStrsList="[]" :readonly="true"></EnumProp>
                                    <EnumProp :isStyleEdit="true" :withUndefined="false" :defaultValue="undefined"
                                        :enumStrsList="[]" :readonly="true"></EnumProp>
                                    <EnumProp :isStyleEdit="true" :withUndefined="false" :defaultValue="undefined"
                                        :enumStrsList="[]" :readonly="true"></EnumProp>
                                </div>
                                <ESColor></ESColor>
                                <BooleanProp :withUndefined="false" :defaultValue="undefined" :readonly="false"
                                    v-model="item.show" :showButton="false">
                                </BooleanProp>
                            </div>
                        </div>
                    </div>
                    <iframe v-else :src="iframeSrc" frameborder="0" @load="loadIframe" ref="mainIframe"
                        style="width:calc(100% - 10px);  height:calc(100% - 10px);cursor: not-allowed"></iframe>
                </div>
                <div class="left-footer">
                    <button>配置规则</button>
                    <button>另存新样式</button>
                    <button>应用</button>
                </div>
            </div>
            <div class="right">
                <div v-for="(item, index) in styleList" :key="index">
                    <img :src="item.thumbnail">
                    <ESTooltip :tooltip="item.name" position="top">
                        <p>{{ item.name }}</p>
                    </ESTooltip>
                </div>
            </div>
        </div>
    </DraggablePopup2>

</template>

<script setup lang="ts">
import { Message, messageBox } from "earthsdk-ui";
import { inject, ref, onMounted, watch, onBeforeUnmount } from "vue";
import { SceneObject } from "earthsdk3";
import { XbsjEarthUi } from "../../../scripts/xbsjEarthUi";
import ContextMenuCom from '../../../components/commom/ContextMenuCom.vue';
import { SceneTreeItem, ES3DTileset } from "earthsdk3";
import EnumProp from "../../eSPropPanel/propertiesMenu/commons/EnumProp.vue"
import { ESColor, ESTooltip } from "earthsdk-ui"
import BooleanProp from "../../eSPropPanel/propertiesMenu/commons/BooleanProp.vue";

import DraggablePopup2 from "../../DraggablePopup2.vue";
import { ESSceneObject } from "earthsdk3";
// 传入值
const props = withDefaults(defineProps<{ isShow: boolean, setStyleTreeItem: SceneTreeItem | undefined, }>(), {});
// 分发内容
const emits = defineEmits(["changeShow"]);
// 配置方式
const configMode = ref('规则配置UI')
// 当前选中对象
const scenetree = ref()
//默认的样式
const styleList = ref([
    {
        name: "默认样式",
        code: [
            {
                condition: [{
                    field: "id",
                    op: "==",
                    value: "xxx"
                }],
                color: [1, 0, 0, 1],
                show: true
            }
        ],
        thumbnail: "",
    }
])
//规则的变量
const ruleRef = ref<any>([
    {
        condition: [{
            field: "id",
            op: "==",
            value: "xxx"
        }],
        color: [1, 0, 0, 1],
        show: true
    }
])
// iframe的地址
const iframeSrc = ESSceneObject.getStrFromEnv('${earthsdk3-assets-script-dir}/markdown/monaco-editor/json-editor.html');
// iframe的ref
const mainIframe = ref<HTMLIFrameElement>();


// 监听setStyleTreeItem
watch(() => props.setStyleTreeItem, async () => {
    scenetree.value = props.setStyleTreeItem
}, { immediate: true })
/**
 * 切换配置方式
 * @param config 
 */
const switchConfig = (config: string) => {
    configMode.value = config
}
// json编辑器初始化
const loadIframe = async () => {
    if (!mainIframe.value || !mainIframe.value.contentWindow) {
        return;
    }
    const setKey = getUuid()
    mainIframe.value.contentWindow.postMessage({ type: 'setJson', id: setKey, value: JSON.stringify(ruleRef.value) })
}

// 确定
const confirm = () => {
    emits('changeShow', false);
}
// 取消
const cancel = () => {
    emits('changeShow', false);
}
// 生成随机ID 
const getUuid = () => {
    var d = new Date().getTime();
    if (window.performance && typeof window.performance.now === "function") {
        d += performance.now();
    }
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
}
</script>
<style scoped>
.style {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 10px;
    box-sizing: border-box;
}

.left-header button {
    width: 120px;
    height: 32px;
    background: rgba(28, 28, 29, 0.6);
    border: 1px solid #888888;
    cursor: pointer;
    color: rgba(230, 230, 230, 1);
}

.activeButton {
    background: rgba(44, 104, 247, 1) !important;
}

.left-header button:hover {
    background: rgb(17, 51, 244) !important;
}

.left-header button:nth-child(1) {
    border-radius: 4px 0px 0px 4px;
    border-right: none;
}

.left-header button:nth-child(2) {
    border-radius: 0px 4px 4px 0px;
}

.rule-fun button,
.left-footer button {
    min-width: 80px;
    padding-left: 10px;
    padding-right: 10px;
    height: 32px;
    background: rgba(28, 28, 29, 0.6);
    border-radius: 4px;
    border: 1px solid #6c7184;
    cursor: pointer;
    color: rgba(230, 230, 230, 1);
    margin-right: 10px;
    box-sizing: border-box;
}

.rule-fun button:hover,
.left-footer button:hover {
    border: 1px solid rgba(44, 104, 247, 1);
}

.left {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.left-content {
    position: relative;
    flex-grow: 1;
    background-color: #000000;
    margin-top: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.rule-header {
    display: grid;
    grid-template-columns: 60px 1fr 120px 70px;
    padding: 5px 10px;
    background-color: #414247;
    box-sizing: border-box;
}


.rule-header p {
    padding: 0px;
    margin: 0px;
    border-right: 1px solid rgb(130, 130, 130);
    text-align: center;
    font-size: 13px;
}

.rule-header p:last-child {
    border: none
}

.rule-fun {
    position: absolute;
    top: -10px;
    right: 0px;
    transform: translateY(-100%);
    display: flex;
    justify-content: flex-end;
}

.rule-content div {
    display: grid;
    grid-template-columns: 60px 1fr 120px 70px;
    align-items: center;
    padding: 5px 10px;
    box-sizing: border-box;
}

.right {
    padding: 30px 15px;
    overflow-y: auto;
}

.right div {
    width: 68px;
    height: 98px;
    cursor: pointer;
    margin: 5px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.right img {
    display: inline-block;
    border: 2px solid #fff;
    border-radius: 5px;

}

.right img:hover {
    border: 2px solid rgb(5, 156, 250);
}

.right p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    padding: 0px;
    margin: 0px;
    text-align: center;
}

.right p:hover {
    color: rgb(57, 186, 255);
}

.es-tooltip {
    margin: 5px 0px !important;
}
</style>
